﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="../../WF/Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>

    <link href="../layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="../layuiadmin/style/admin.css" rel="stylesheet" />
    <script src="../layuiadmin/layui/layui.js"></script>

    <link href="../layuiadmin/layui/css/modules/layer/default/layer.css" rel="stylesheet" />
    <script src="../layuiadmin/layui/lay/modules/layer.js"></script>

    <!-- 引用通用的js文件. -->
    <script src="/WF/Scripts/config.js?v=1.0" type="text/javascript"></script>
    <script src="/WF/Comm/Gener.js?v=1.0" type="text/javascript"></script>
    <script src="../../WF/Scripts/QueryString.js" type="text/javascript"></script>
    <script src="../../WF/Scripts/echartsjs/echarts.min.js" type="text/javascript"></script>
    <style type="text/css">
        .au-but {
            font-size: 0.6rem;
            background-color: transparent;
            border: none;
            outline: none;
            border: 1px solid #E59C26;
            padding: 0 0.25rem;
            color: #E59C26;
            border-radius: 0.125rem;
        }

        .but-color1 {
            border-color: #0F81EC;
            color: #0F81EC;
        }

        .but-color2 {
            border-color: #FF4E00;
            color: #FF4E00;
        }

        .but-color3 {
            border-color: #3c763d;
            color: #3c763d;
        }

        .layuiadmin-card-status dd div a {
            color: #2f4050 !important;
        }
    </style>
    <script type="text/javascript">
        var fk_flow = GetQueryString("FK_Flow");
        $(function () {
            //数据分析-总的概况
            GetGenerWorksByDept();

            //分析项
            GetAnalyseGroupByRpt();

            //按月份/按人员统计
            FlowAnalyse_DataSet();

        });
        /**
         * 获取本部门的数据统计
         */
        function GetGenerWorksByDept() {
            var handler = new HttpHandler("BP.Cloud.HttpHandler.App_OneFlow");
            handler.AddPara("FK_Flow", fk_flow);
            var data = handler.DoMethodReturnString("DataPanelOrg_GetGenerWorksByFlowNo");
            if (data.indexOf("err@") != -1) {
                layer.alert(data);
                console.log(data);
                return;
            }
            data = JSON.parse(data);
            //部门
            $("#GWF_Counts").html(data.GWF_Counts);
            $("#GWF_RuningCounts").html(data.GWF_RuningCounts == undefined ? 0 : data.GWF_RuningCounts);
            $("#GWF_CompleteCounts").html(data.GWF_CompleteCounts == undefined ? 0 : data.GWF_CompleteCounts);
            $("#GWF_ReturnCounts").html(data.GWF_ReturnCounts == undefined ? 0 : data.GWF_ReturnCounts);
            $("#GWF_OverCounts").html(data.GWF_OverCounts == undefined ? 0 : data.GWF_OverCounts);
            $("#GWF_DeleteCounts").html(data.GWF_DeleteCounts == undefined ? 0 : data.GWF_DeleteCounts);
        }

        /**
         *
         * 分析项的解析
         */
        function GetAnalyseGroupByRpt() {
            var handler = new HttpHandler("BP.Cloud.HttpHandler.App_OneFlow");
            handler.AddPara("FK_Flow", fk_flow);
            var data = handler.DoMethodReturnString("DataPanelDept_GetAnalyseGroupByRpt");
            if (data.indexOf("err@") != -1) {
                layer.alert(data);
                console.log(data);
                return;
            }
            data = JSON.parse(data);
            var _html = "";
            $.each(data, function (idx, item) {
                if (item.KeyOfEn != "WorkID" && item.KeyOfEn != "OID" && item.KeyOfEn != "PWorkID"
                    && item.KeyOfEn != "FID" && item.KeyOfEn != "PNodeID" && item.KeyOfEn != "FlowEndNode") {
                    _html += '<li>';
                    _html += '<input type="checkbox" name="' + item.KeyOfEn + '" id="' + item.KeyOfEn + '" checked=""  style="display:none">';
                    _html += '<div class="layui-unselect layui-form-checkbox" lay-skin="primary" onclick="CheckedState(\'' + item.KeyOfEn + '\',this)">';
                    _html += '<span>' + item.Name + '</span>';
                    _html += '<i class="layui-icon layui-icon-ok"></i>';
                    _html += '</div>';
                    _html += '</li>';
                }

            });
            $("#flowByNYPanel").html(_html);

        }

        function ShowPanel(panelId) {

            $("#" + panelId).show();
        }

        function hidePanel() {
            $(".layui-table-tool-panel").hide();
        }
        function CheckedState(key, obj) {
            if ($(obj).hasClass("layui-form-checked") == true) {
                $(obj).removeClass("layui-form-checked");
                $("#" + key).removeAttr("checked");
            } else {
                $(obj).addClass("layui-form-checked");
                $("#" + key).attr("checked", "checked");
            }
        }

        /**
         * 流程数据分析
         */
        var flowData;
        function FlowAnalyse_DataSet() {
            var handler = new HttpHandler("BP.Cloud.HttpHandler.App_OneFlow");
            handler.AddPara("FK_Flow", fk_flow);
            var data = handler.DoMethodReturnString("DataPanelOrg_GetAnalyseByFlowNo_DataSet");
            if (data.indexOf("err@") != -1) {
                layer.alert(data);
                console.log(data);
                return;
            }
            flowData = JSON.parse(data);
            var _html = "";

            //按月份分析 发起的数量，完成的数量
            queryFlowAnalyse("FlowByNY", "流程-月", true, false, false);

            //按人员分析
            queryFlowAnalyse("FlowByDept", "流程-部门", false, false, true);
        }


        function queryFlowAnalyse(flowType, title, isLineShow, isPieShow, isBarShow) {
            var Flow_X = [];
            var Pie_Flow_X = [];
            if (flowType == "FlowByNY") {
                if (isPieShow == true)
                    Pie_Flow_X = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];

                Flow_X = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
            }
            if (flowType == "FlowByDept")
                $.each(flowData.FlowStartByDept, function (i, item) {
                    Flow_X[i] = item.DeptName;
                });

            var startFlow = [];
            var startFlowPie = [];
            var completeFlow = [];
            if (flowType == "FlowByNY") {
                for (var i = 0; i < Flow_X.length; i++) {
                    var isHave = false;
                    for (var k = 0; k < flowData.FlowStartByNY.length; k++) {
                        if (Flow_X[i] == flowData.FlowStartByNY[k].FK_NY) {
                            isHave = true;
                            startFlow[i] = flowData.FlowStartByNY[k].Num;
                            startFlowPie[i] = { name: Pie_Flow_X[i], value: flowData.FlowStartByNY[k].Num };
                            break;
                        }
                    }
                    if (isHave == false)
                        startFlow[i] = 0;
                    isHave = false;
                    for (var k = 0; k < flowData.FlowCompleteByNY.length; k++) {
                        if (Flow_X[i] == flowData.FlowCompleteByNY[k].FK_NY) {
                            isHave = true;
                            completeFlow[i] = flowData.FlowCompleteByNY[k].Num;
                            break;
                        }
                    }
                    if (isHave == false)
                        completeFlow[i] = 0;

                }
                if (isPieShow == true)
                    Flow_X = Pie_Flow_X;

            }
            if (flowType == "FlowByDept") {

                for (var k = 0; k < flowData.FlowStartByDept.length; k++) {
                    startFlow[k] = flowData.FlowStartByDept[k].Num;
                    startFlowPie[k] = { name: Flow_X[k], value: flowData.FlowStartByDept[k].Num };

                }

                for (var k = 0; k < flowData.FlowCompleteByDept.length; k++) {
                    completeFlow[k] = flowData.FlowCompleteByDept[k].Num;

                }


            }

            //$.each(flowData.FlowStartByNY, function (i, item) {
            //    startFlow[i] = item.Num;
            //});
            //$.each(flowData.FlowCompleteByNY, function (i, item) {
            //    completeFlow[i] = item.Num;
            //});

            /*********************************************折线图*****************************************************/
            // 基于准备好的dom，初始化echarts实例
            if (isLineShow) {
                var myChart = echarts.init(document.getElementById(flowType + '_Line'));

                // 指定图表的配置项和数据
                var option = {
                    grid: {
                        top: '5%',
                        right: '1%',
                        left: '1%',
                        bottom: '10%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: Flow_X
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '发起流程数',
                        data: startFlow,
                        type: 'line',
                        smooth: true,
                        symbol: 'emptydiamond',
                        itemStyle: {
                            normal: {
                                color: '#8cd5c2', //改变折线点的颜色
                                lineStyle: {
                                    color: '#8cd5c2' //改变折线颜色
                                }
                            }
                        },
                        areaStyle: {
                            normal: {}
                        },
                    }, {
                        name: '完成流程数',
                        data: completeFlow,
                        type: 'line',
                        smooth: true,
                        symbol: 'emptydiamond',

                        areaStyle: {
                            normal: {}
                        },
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }

            /*********************************************饼状图*****************************************************/
            // 基于准备好的dom，初始化echarts实例
            if (isPieShow) {
                var myChart = echarts.init(document.getElementById(flowType + '_Pie'));

                // 指定图表的配置项和数据
                var option = {

                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                        orient: 'vertical',
                        // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                        x: 'left',
                        // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                        y: 'center',
                        //itemWidth: 24,   // 设置图例图形的宽
                        //itemHeight: 18,  // 设置图例图形的高
                        //textStyle: {
                        //    color: '#666'  // 图例文字颜色
                        //},
                        //// itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
                        //itemGap: 10,
                        //backgroundColor: '#f8f8f8',  // 设置整个图例区域背景颜色
                        data: Flow_X
                    },
                    series: [{
                        type: 'pie',
                        name: '',
                        radius: '60%',
                        center: ['60%', '50%'],
                        data: startFlowPie,
                        //itemStyle: {
                        //    // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
                        //    // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
                        //    emphasis: {
                        //        shadowBlur: 10,
                        //        shadowOffsetX: 0,
                        //        shadowColor: 'rgba(30, 144, 255，0.5)'
                        //    }
                        //},

                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }

            /*********************************************柱状图*****************************************************/
            // 基于准备好的dom，初始化echarts实例
            if (isBarShow) {
                var myChart = echarts.init(document.getElementById(flowType + '_Bar'));
                ////设计显示的颜色
                //var colorList = [];
                //for (var i = 0; i < Flow_X.length; i++) {
                //    if (i % 3 == 0)
                //        colorList[i] = '#ff4844';
                //    if (i % 3 == 1)
                //        colorList[i] = '#9ac3e5';
                //    if (i % 3 == 2)
                //        colorList[i] = '#66ac52';
                //}
                // 指定图表的配置项和数据
                var option = {
                    grid: {
                        top: '5%',
                        right: '1%',
                        left: '1%',
                        bottom: '10%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['流程个数']
                    },
                    xAxis: {
                        type: 'category',
                        data: Flow_X
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '发起数量',
                        data: startFlow,
                        type: 'bar',
                        smooth: true,
                        itemStyle: {
                            normal: {
                                color: 'red'
                            }
                        }
                    }, {
                        name: '完成数量',
                        data: completeFlow,
                        type: 'bar',
                        smooth: true,
                        itemStyle: {
                            normal: {
                                color: 'blue'
                            }
                        }
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }

        }

        function ChangeShowDiv(flowType, chartType, obj) {
            $(obj).addClass("layui-this");
            if (chartType == "Line") {
                $("#" + flowType + "_Pie").removeClass("layui-this");
                $("#" + flowType + "_Bar").removeClass("layui-this");
                $("#" + flowType + "_Line").addClass("layui-this");
                $("#" + flowType + "_Pie_i").removeClass("layui-this");
                $("#" + flowType + "_Bar_i").removeClass("layui-this");
                queryFlowAnalyse(flowType, "", true, false, false);
            }
            if (chartType == "Pie") {
                $("#" + flowType + "_Pie").addClass("layui-this");
                $("#" + flowType + "_Bar").removeClass("layui-this");
                $("#" + flowType + "_Line").removeClass("layui-this");
                $("#" + flowType + "_Line_i").removeClass("layui-this");
                $("#" + flowType + "_Bar_i").removeClass("layui-this");
                queryFlowAnalyse(flowType, "", false, true, false);
            }
            if (chartType == "Bar") {
                $("#" + flowType + "_Pie").removeClass("layui-this");
                $("#" + flowType + "_Bar").addClass("layui-this");
                $("#" + flowType + "_Line").removeClass("layui-this");
                $("#" + flowType + "_Pie_i").removeClass("layui-this");
                $("#" + flowType + "_Line_i").removeClass("layui-this");
                queryFlowAnalyse(flowType, "", false, false, true);
            }


        }
        //已知URL,在右侧打开页面
        function OpenWindowRight(url, title) {
            if (top.layui.index) {
                top.layui.index.openTabsPage(url, title)
            } else {
                window.open(url)
            }
        }
    </script>
</head>
<body layadmin-themealias="coffee">

    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">数据统计（本流程,本组织）<font color="red">只能显示不能查看本组织数据</font></div>
                            <div class="layui-card-body">

                                <div class="layui-carousel layadmin-carousel layadmin-backlog" lay-anim="" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 280px;">
                                    <div carousel-item="">
                                        <ul class="layui-row layui-col-space10 layui-this">
                                            <li class="layui-col-xs4">
                                                <a href="javascript:void(0);" class="layadmin-backlog-body">
                                                    <h3>总数</h3>
                                                    <p><cite id="GWF_Counts">66</cite></p>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs4">
                                                <a href="javascript:void(0);" class="layadmin-backlog-body">
                                                    <h3>运行中</h3>
                                                    <p><cite id="GWF_RuningCounts">12</cite></p>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs4">
                                                <a href="javascript:void(0);" class="layadmin-backlog-body">
                                                    <h3>已完成</h3>
                                                    <p><cite id="GWF_CompleteCounts">99</cite></p>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs4">
                                                <a href="javascript:void(0);" class="layadmin-backlog-body">
                                                    <h3>退回</h3>
                                                    <p><cite id="GWF_ReturnCounts">20</cite></p>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs4">
                                                <a href="javascript:void(0);" class="layadmin-backlog-body">
                                                    <h3>逾期</h3>
                                                    <p><cite id="GWF_OverCounts">20</cite></p>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs4">
                                                <a href="javascript:void(0);" class="layadmin-backlog-body">
                                                    <h3>已删除</h3>
                                                    <p><cite id="GWF_DeleteCounts">20</cite></p>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">流程-按月份统计</div>
                            <div class="layui-card-body">
                                <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview" lay-anim="fade" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 280px;">
                                    <div carousel-item id="MyJoinlow">
                                        <div id="FlowByNY_Line" class="layui-this"></div>
                                        <div id="FlowByNY_Bar"></div>
                                        <div id="FlowByNY_Pie"></div>

                                    </div>
                                    <div class="layui-carousel-ind">
                                        <!--<div class="layui-inline" title="筛选列" onclick="ShowPanel('flowByNYPanel')">
                                            <i class="layui-icon layui-icon-cols"></i>
                                            <ul class="layui-table-tool-panel" style="display:none;" id="flowByNYPanel">
                                                <li>
                                                    <input type="checkbox" name="id" checked="" title="ID" style="display:none">
                                                    <div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
                                                        <span>ID</span>
                                                        <i class="layui-icon layui-icon-ok"></i>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>-->
                                        <ul>
                                            <li class="layui-this" id="FlowByNY_Line_i" onclick="ChangeShowDiv('FlowByNY','Line',this)"></li>
                                            <li class="" id="FlowByNY_Bar_i" onclick="ChangeShowDiv('FlowByNY','Bar',this)"></li>
                                            <li class="" id="FlowByNY_Pie_i" onclick="ChangeShowDiv('FlowByNY','Pie',this)"></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-card">
                            <div class="layui-card-header">流程-按部门统计</div>
                            <div class="layui-card-body">
                                <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
                                    <div carousel-item id="FlowByDept">
                                        <div id="FlowByDept_Bar" class="layui-this"></div>
                                        <div id="FlowByDept_Line"></div>
                                        <div id="FlowByDept_Pie"></div>

                                    </div>
                                    <div class="layui-carousel-ind">
                                        <ul>
                                            <li class="layui-this" id="FlowByDept_Bar_i" onclick="ChangeShowDiv('FlowByDept','Bar',this)"></li>
                                            <li class="" id="FlowByDept_Line_i" onclick="ChangeShowDiv('FlowByDept','Line',this)"></li>
                                            <li class="" id="FlowByDept_Pie_i" onclick="ChangeShowDiv('FlowByDept','Pie',this)"></li>

                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style type="text/css">
        .layui-table-tool-panel {
            position: absolute;
            top: 29px;
            left: auto !important;
            right: -1px !important;
            min-width: 150px;
            min-height: 40px;
            text-align: left;
            overflow-y: auto;
            background-color: rgb(255, 255, 255) !important;
            box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px;
            padding: 5px 0px;
            border-width: 1px;
            border-style: solid;
            border-color: rgb(210, 210, 210);
            border-image: initial;
            border-radius: 0px !important;
        }

            .layui-table-tool-panel li {
                padding: 0 10px;
                line-height: 30px;
                -webkit-transition: .5s all;
                transition: .5s all;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: auto !important;
                height: auto !important;
                border-radius: 0px !important;
                background-color: white !important;
            }
    </style>

</body>
</html>